<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/5/17 19:50
 -->
<template>
  <div>
    <el-tree :data="menuList" node-key="id" :props="defaultProps" :default-expand-all="true">
      <template v-slot="{ node, data }">
        <template v-if="node.level == 1">
          <div class="node-menu__item" :type="data.type">
            <span>{{ data.name }}</span>
          </div>
        </template>
        <template v-else>
          <draggable :options="draggableOptions" @end="end" @start="move">
            <div class="node-submenu__item" :type="data.type">
              <i :class="data.icon"></i> <span>{{ data.name }}</span>
            </div>
          </draggable>
        </template>
      </template>
    </el-tree>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { treeToList } from '@bianpengfei/utils'

export default {
  components: {
    Draggable
  },
  data() {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        // ghostClass: 'jsplumb-drag__item',
        // 不使用H5原生的配置
        forceFallback: true,
        // 拖拽的时候样式
        fallbackClass: 'jsplumb-drag__item'
      },
      menuList: [
        {
          id: '1',
          type: 'group',
          name: '开始节点',
          ico: 'el-icon-video-play',
          open: true,
          children: [
            {
              id: '11',
              type: 'timer',
              name: '数据接入',
              icon: 'el-icon-time',
              // 自定义覆盖样式
              style: {}
            },
            {
              id: '12',
              type: 'task',
              name: '接口调用',
              icon: 'el-icon-odometer',
              // 自定义覆盖样式
              style: {}
            }
          ]
        },
        {
          id: '2',
          type: 'group',
          name: '结束节点',
          ico: 'el-icon-video-pause',
          open: true,
          children: [
            {
              id: '21',
              type: 'end',
              name: '流程结束',
              icon: 'el-icon-caret-right',
              // 自定义覆盖样式
              style: {}
            },
            {
              id: '22',
              type: 'over',
              name: '数据清理',
              icon: 'el-icon-shopping-cart-full',
              // 自定义覆盖样式
              style: {}
            },
            {
              id: '23',
              type: 'over',
              name: '设置',
              icon: 'el-icon-s-tools',
              // 自定义覆盖样式
              style: {}
            }
          ]
        }
      ]
    }
  },

  computed: {
    _menuList() {
      return treeToList({ tree: this.menuList, props: { id: 'id', children: 'children' } })
    }
  },

  methods: {
    // 拖拽开始时触发
    move(evt) {
      console.log('start', evt)
      this.startX = evt.originalEvent.clientX
      this.startY = evt.originalEvent.clientY
      const type = evt.item.attributes.type.nodeValue
      this.nodeMenu = this.getMenuByType(type)
      console.log(this.nodeMenu)
    },
    // 拖拽结束时触发
    end(evt) {
      this.$emit('addNode', evt, this.nodeMenu)
    },

    // 根据类型获取左侧菜单对象
    getMenuByType(type) {
      return this._menuList.find((v) => v.type == type)
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  display: flex;
  justify-content: center;
}
.node-menu__item {
  height: 38px;
  display: flex;
  align-items: center;
  color: #333;
  font-weight: 700;
}
.node-submenu__item {
  display: flex;
  align-items: center;
  color: #565758;
  margin: 2px 0;
  border-radius: 5px;
  cursor: move;
  user-select: none;
  height: 32px;
  box-sizing: border-box;
  position: relative;
  border: 1px dashed transparent;
  min-width: 140px;
  i {
    padding-left: 12px;
    padding-right: 4px;
    position: relative;
    display: inline-block;
    color: $--color-primary;
  }
  span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
  }
  &:hover,
  &.jsplumb-drag__item {
    border: 1px dashed $--color-primary;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background-color: $--color-primary;
      border-radius: 4px 0 0 4px;
      z-index: 10;
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: $--color-primary;
      opacity: 0.1;
    }
  }
}

/*el-tree 分割线*/
::v-deep .el-tree {
  .el-tree-node__content {
    padding-left: 0 !important;
    height: auto;
    &:hover {
      background: transparent;
    }
  }

  .el-tree-node__expand-icon {
    color: #8c8c8c;
    &.is-leaf {
      display: none;
    }
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-left: 1px dashed #ccc;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    left: -3px;
    top: 17px;
    border-top: 1px dashed #ccc;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>
